<template>
  <el-menu
    class="categories"
    default-active="0"
    @select="handleSelect"
    active-text-color="gray"
  >
    <el-menu-item index="0">
      <i class="el-icon-menu"></i>
      <span style="color: white">全部</span>
    </el-menu-item>
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span style="color: white">文学</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span style="color: white">流行</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-menu"></i>
      <span style="color: white">文化</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-menu"></i>
      <span style="color: white">生活</span>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-menu"></i>
      <span style="color: white">经管</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-menu"></i>
      <span style="color: white">科技</span>
    </el-menu-item>
  </el-menu>
</template>
  
  <script>
export default {
  name: "SideMenu",
  data() {
    return {
      cid: "",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.cid = key;
      this.$emit("indexSelect");
      console.log(33333333333);
    },
  },
};
</script>
  
  <style scoped>
.categories {
  position: fixed;
  margin-left: 43%;
  left: -43%;
  margin-top: 1.6%;
  width: 150px;
  background-color: #181b1d55;
}
.el-menu-item:hover {
    background-color: #a1bf39;
}
</style>